<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理敏感词</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/manage_user.css">
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="plugins/element-ui/index.css">

</head>

<body>
    <!-- 这是导航栏 -->
    <div class="nav">
        <img src="image/logo.png" alt="logo">
        <span class="head">我的博客系统</span>
        <!-- 空白元素, 用来占位置 -->
        <span class="spacer">欢迎来到知识海洋</span>
        <a href="#" id="logout" class="logout">退出</a>
        <a href="blog_register.html">注册</a>
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 个人信息卡片 -->
            <div class="card">
                <img src="" alt="我的头像" id="myphoto">
                <h3></h3>
                <div class="counter">
                    <a target="_blank" id="git">我的Gitee</a>
                </div>
                <h6></h6>
                <div class="counter">
                    <a href="user_update.html">修改个人资料</a>
                </div>
            </div>
        </div>
        <div class="right">
            <!-- 右侧内容详情 -->
            <div class="dashboard-container" id="user-app">
                <div class="container2">
                    <div class="tableBar">
                        <el-input v-model="input" placeholder="请输入敏感词查找" style="width: 250px" clearable
                            @keyup.enter.native="handleQuery">
                            <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer"
                                @click="handleQuery"></i>
                        </el-input>
                        <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true"
                            style="margin-left: 10px;">{{ '新增' }}</el-button>
                        <el-dialog title="请填写敏感词" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                            <el-form label-width="100px">
                                <el-form-item label="敏感词">
                                    <el-input v-model="word" placeholder="请输入敏感词"></el-input>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取消</el-button>
                                <el-button type="primary" @click="handleSubmit">提交</el-button>
                            </span>
                        </el-dialog>
                    </div>
                    <el-table :data="tableData" stripe class="tableBox">
                        <el-table-column prop="word" label="敏感词"></el-table-column>
                        <el-table-column label="操作" width="160" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" class="delBut non"
                                    @click="openEditDialog(scope.row)">
                                    {{ '修改' }}
                                </el-button>
                                <el-dialog title="修改敏感词" :visible.sync="editDialogVisible" width="30%">
                                    <el-form ref="editForm" :model="editForm" label-width="100px">
                                        <el-form-item label="需要修改的敏感词">
                                            <el-input v-model="editForm.word"></el-input>
                                        </el-form-item>
                                        <el-form-item label="修改后的敏感词">
                                            <el-input v-model="editForm.updateNewWord"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="editDialogVisible = false">取消</el-button>
                                        <el-button type="primary" @click="submitEdit">提交</el-button>
                                    </span>
                                </el-dialog>
                                <el-button type="text" size="small" class="delBut non" @click="handleDelete(scope.row.word)">
                                    {{ '删除' }}
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination class="pageList" :page-sizes="[5, 10, 20, 30, 40]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="counts" :current-page.sync="page"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>

    </div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./plugins/element-ui/index.js"></script>
    <script>
        //处理退出登录请求
        let logoutD = document.querySelector(".logout");
        logoutD.onclick = function () {
            jQuery.getJSON("login/out", {},
                function (data) {
                    if (data.status == 1) {
                        alert(data.message);
                        window.location.href = 'blog_login.html'
                    }
                }
            )
        }
        //使用ajax请求，向服务器获取当前用户的登录状态
        jQuery.getJSON("home/myMse", {},
            function (obj) {
                if (obj.status == -1) {
                    alert(obj.message);
                    window.location.href = 'blog_update.html';
                } else {
                    buildUser(obj.data);
                }
            }
        )

        function buildUser(user) {
            //根据服务器返回的用户信息，来修改页面的显示内容
            let h3 = document.querySelector('.card>h3');
            h3.innerHTML = user.username;
            let h6 = document.querySelector('.card>h6');
            h6.innerHTML = user.signature;
            let gitee = document.querySelector('#git');
            gitee.href = user.gitee;
            let photo = document.querySelector('#myphoto');
            photo.src = user.img;
        }
    </script>
    <script>
        new Vue({
            el: '#user-app',
            data() {
                return {
                    input: '',
                    counts: 0,
                    page: 1,
                    pageSize: 10,
                    tableData: [],
                    id: '',
                    identity: '',
                    dialogVisible: false,
                    word: '',
                    editDialogVisible: false,
                    editForm: {
                        word: '',
                        updateNewWord: ''
                    }
                }
            },
            computed: {},
            created() {
                this.init()
                $.ajax({
                    type: 'get',
                    url: 'admin/getNowUser',
                    success: function (respData) {
                        if (respData.status == 1) {
                            this.user = respData.data;
                        } else {
                            $.toast({
                                heading: '警告',
                                text: respData.message,
                                icon: 'warning'
                            });
                        }
                    },
                    error: function () {
                        $.toast({
                            heading: '错误',
                            text: '访问出现问题，请与管理员联系.',
                            icon: 'error'
                        });
                    }
                })
            },
            mounted() {},
            methods: {
                async init() {
                    const params = {
                        page: this.page,
                        pageSize: this.pageSize,
                        name: this.input ? this.input : undefined
                    }
                    try {
                        const respData = await $.ajax({
                            type: 'get',
                            url: 'word/page',
                            data: params,
                        })

                        if (respData.status == 1) {
                            this.tableData = respData.data.records;
                            this.counts = this.tableData.length;
                        } else {
                            $.toast({
                                heading: '警告',
                                text: '警告',
                                icon: 'warning'
                            });
                        }
                    } catch (error) {
                        $.toast({
                            heading: '错误',
                            text: '访问出现问题，请与管理员联系.',
                            icon: 'error'
                        });
                    }

                },
                handleQuery() {
                    this.page = 1;
                    this.init();
                },
                handleSubmit() {
                    var vm = this;
                    $.ajax({
                        type: 'post',
                        url: 'word/add',
                        data: {
                            word: vm.word
                        },
                        success: function (respData) {
                            if (respData.status == 1) {
                                alert(respData.message);
                                vm.dialogVisible = false;
                            } else {
                                alert("请联系管理员!");
                            }
                        },
                        error: function () {
                            alert("请联系管理员");
                        }
                    });
                },
                openEditDialog(row) {
                    this.editForm.word = row.word; // 填充需要修改的信息
                    this.editDialogVisible = true;
                },
                submitEdit() {
                    var vm = this;
                    $.ajax({
                        type: 'post',
                        url: 'word/update',
                        data: {
                            word: vm.editForm.word, // 需要修改的信息
                            updateNewWord: vm.editForm.updateNewWord // 修改后的信息
                        },
                        success: function (respData) {
                            if (respData.status == 1) {
                                alert(respData.message);
                                vm.editDialogVisible = false;
                                vm.init();
                            } else {
                                alert("请联系管理员!");
                            }
                        },
                        error: function () {
                            alert("请联系管理员");
                        }
                    });
                },
                handleClose(done) {
                    // 关闭对话框前的处理逻辑
                    done();
                    this.init()
                },
                handleDelete(word) {
                    this.$confirm('确定删除该条数据吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 用户点击确定按钮时执行的操作
                        this.deleteRow(word);
                        this.init();
                    }).catch(() => {
                        // 用户点击取消按钮时执行的操作
                        this.init();
                    });
                },
                deleteRow(word) {
                    var vm = this;
                    // 执行删除操作的逻辑
                    $.ajax({
                        type: 'post',
                        url: 'word/delete',
                        data: {
                            word: word, // 需要删除的信息
                        },
                        success: function (respData) {
                            if (respData.status == 1) {
                                alert(respData.message);
                                vm.init();
                            } else {
                                alert("请联系管理员!");
                            }
                        },
                        error: function () {
                            alert("请联系管理员");
                        }
                    });
                },
                handleSizeChange(val) {
                    this.pageSize = val
                    this.init()
                },
                handleCurrentChange(val) {
                    this.page = val
                    this.init()
                }
            }
        })
    </script>
</body>

</html>